import React from 'react';
import { inject, observer } from 'mobx-react';
import * as mobx from 'mobx';
import { Tabs,List,WhiteSpace,Icon } from 'weaver-mobile';
import { ListPage } from 'weaver-mobile-page';
import * as Common from '../../util/common';
const getLabel = Common.getLabel;

@inject("wfResourceStore","wfLayoutStore")
@observer
export default class Resource extends React.Component{
    constructor(props){
        super(props);
    }
    componentDidMount(){
        const { params,wfResourceStore } = this.props;
        wfResourceStore.loadData(params);
    }
    render(){
        const { wfResourceStore } = this.props;
        const { tabKey } = wfResourceStore;
        const tabs = this.getTopTabs();
        return (
            <div className="wf-req-resource">
                <Tabs
                    tabs={tabs}
                    initialPage={parseInt(tabKey)}
                    swipeable={false}
                    onChange={tab => wfResourceStore.switchTab(tab.type)}
                >
                    {
                        tabs.map(tab =>{
                            return this.renderList(parseInt(tab.type));
                        })
                    }
                </Tabs>
            </div>
        )
    }
    getTopTabs(){
        const tabs = [
            {type:"0", title:getLabel("332","全部")},
			{type:"1", title:getLabel("22105","相关流程")},
			{type:"2", title:getLabel("857","相关文档")},
			{type:"3", title:getLabel("22194","相关附件")}
        ];
        return tabs;
    }
    renderList(type){
        const { wfResourceStore } = this.props;
        const { propFileCfg={} } = this.props.wfLayoutStore;
        const { prohibitDownload } = propFileCfg;
        let datas = mobx.toJS(wfResourceStore.datas) || [];
        if(type > 0){   //相关流程、文档、附件
            datas = datas.filter(item =>{
                return item.restype == type
            });
        }
        const template = {
            default: [{
                key: "col1",
                style:{flex:"none"},
                render: (row) =>{
                    const restype = row.restype;
                    let iconType = "";
                    let iconColor = "#FFF";
                    if(restype == "1"){
                        iconType = "procedure";
                        iconColor = "#14C4FF";
                    }else if(restype == "2"){
                        iconType = "currency";
                        iconColor = "#FD6950";
                    }else if(restype == "3"){
                        iconType = "enclosure-01";
                        iconColor = "#57D58F";
                    }
                    return <Icon type={iconType} size="lg" style={{color:iconColor}}></Icon>
                }
            },{
                key: "col2",
                configs: [
                    {
                        key: "col2_row1",
                        configs: [
                            {key:"reshtmlspan"}
                        ]
                    },{
                        key: "col2_row2",
                        configs: [
                            {key:"creatorspan"},
                            {key:"createdatespan", style:{float:"right"}}
                        ]
                    }
                ]
            }]
        };
        return (
            <div key={`type_${type}`} className="wf-req-resource-list">
                <WhiteSpace />
                {
                    datas.length > 0 ? 
                    <List>
                        {
                            datas.map(row =>{
                                return  (
                                    <ListPage.Item
                                        showCheck={false}
                                        data={row}
                                        template={template}
                                        onClick={this.clickEvent.bind(this)}
                                        withSwipeAction={row.restype === "3" && prohibitDownload !== "1" }
                                        swipeActionProps={{
                                            style: { backgroundColor: '#55b1f9' },
                                            autoClose: true,
                                            right: [
                                                {
                                                    text: getLabel(258, '下载'),
                                                    className: "wf-resource-download",
                                                    onPress: () => {
                                                        window.WfForm.downLoadFile(row.id, "/req/resource");
                                                    }
                                                },
                                            ]
                                        }}
                                    >
                                    </ListPage.Item>
                                )
                            })
                        }
                    </List> :
                    <div className="wf-req-resource-empty">{getLabel(83553,"暂无数据")}</div>
                }
            </div>
        );
    }
    clickEvent(row) {
        const restype = row.restype;
        const key = row.id;
        const baseRoute = "/req/resource";
        if (restype == "1") {
            Common.showFormReq(key, {}, baseRoute);
        } else if (restype == "2") {
            Common.showFormDoc(key, {}, baseRoute);
        } else if (restype == "3") {
            let fileExtendName = "";
            if(row.reshtml&&row.reshtml.includes(".")){
                fileExtendName=row.reshtml.split(".")[1];
            }
            let fileObj={
                imagefileid:key,
                fileExtendName:fileExtendName,
                isPreViewImg:false,
            }
            Common.showFormAttach(fileObj,{},'/req/resource');
        }
    }
}